Ext.define('CDR.view.TariffSetting', {
	extend: 'Ext.window.Window',
	alias: 'widget.tariff-setting',
	requires: [
		'Ext.ux.plugin.TreeEditPlugin',
		'Ext.ux.plugin.TreeCellEditor'
	],
	id: 'x-cdr-tariff-setting',
	width: 830,
	height: 600,
	closeAction:'hide',
	modal: true,
	resizable: false,
	title: 'Tariff Setting',
	tbar: [{
		text: 'New TF',
		iconCls: 'icon-add',
		name: 'new-tf'
	} ,'-' , {
		text: 'New Group',
		iconCls: 'icon-add',
		id: 'x-cdr-tariff-setting-new-group',
		name: 'new-group',
		disabled: true
	}, '-' , {
		text: 'New Code',
		iconCls: 'icon-add',
		id: 'x-cdr-tariff-setting-new-code',
		name: 'new-code',
		disabled: true
	}, '-' , {
		text: 'Delete',
		iconCls: 'icon-delete',
		name: 'delete'
	}, '-' , {
		text: 'Reload Config',
		iconCls: 'icon-refresh',
		name: 'refresh'
	}],
	layout: 'fit',
	border: false,
	bodyStyle: 'padding:0px',
	initComponent: function(){
		var me = this;
		me.callParent(arguments);
		me.add({
			xtype: 'panel',
			border: false,
			layout: 'border',
			items: [{
				xtype: 'panel',
				id: 'x-tariff-setting-tree',
				layout: 'fit',
				split: true,
				collapsible: true,
				width: 230,
				region: 'west',
			},{
				xtype: 'container',
				style :'border: 1px solid #99BCE8',
				id: 'x-tariff-setting-container',
				layout: 'fit',
				region: 'center'
			}]
		});
		
		CDRUtils.listTariffNode(Ext.getCmp('x-tariff-setting-tree'));
	},
	
	changeView: function(view, data) {
		var container = Ext.getCmp('x-tariff-setting-container');
		container.removeAll();
		container.add({
			xtype: view,
			listeners: {
				afterrender: function(comp){
					comp.populdateValue(data);
				}
			}
		});
	},
	
	maskView: function() {
		this.down('#x-tariff-setting-container').el.mask('Loading');
	},
	
	unMaskView: function() {
		this.down('#x-tariff-setting-container').el.unmask('Loading');
	}
});